<template id="textFather">
    <div class="chat-window center">
      <div class="chat-messages">
        <div :class="{'message': true, [cht.type + '-message']: true}" v-for="(cht,index) in chat" :key="index">
          <div :class="{['message-'+cht.type]:true}"><img :src="cht.avatar" class="avatar"
              v-show="cht.type == 'received'"> <span class="message-content">{{cht.content}}</span><img
              :src="cht.avatar" class="avatar" v-show="cht.type == 'sent'"></div>
        </div>
      </div>
      <text-son @danji="change" :newText="newText"></text-son>
    </div>
  </template>

<script>
import TextSon from './TextSon.vue';

    export default {
        components: {
            TextSon
      },
      data() {
        return {
          chat: [
            // {
            //   type: "received",
            //   avatar: "./static/images/avt-01.png",
            //   content: "好久不见！"
            // },
            // {
            //   type: "sent",
            //   avatar: "./static/images/avt-02.png",
            //   content: "是啊，好久不见了"
            // },
            // {
            //   type: "received",
            //   avatar: "./static/images/avt-01.png",
            //   content: "最近怎么样？"
            // }
          ],
          newText: ''
        }
      },
      methods: {
        change(value) {
          this.newText = value;
          this.chat.push({
            type: "sent",
            avatar: "./static/images/avt-02.png",
            content: this.newText
          })
        },
        loadNewsList(){
          this.$axios.get('./static/chat-history.json').then(resp => {
            this.chat = resp.data
          })
        }
      },
      created(){
        this.loadNewsList();
      }
    }
</script>

<style scoped>
.chat-window {
  height: 500px;
  border: 1px solid #ccc;
  border-radius: 5px;
  overflow: hidden;
}
.center{
  width: 600px;
  margin: 0 auto;
}
.chat-messages {
  padding: 10px;
  height: 420px;
  max-height: 500px;
  overflow-y: scroll;
}
.message {
  margin-top: 10px;
  display: flex;
  align-items: flex-start; /* Ensure messages align at the top */
}
.message-received {
  display: flex;
  align-items: center;
}
.message-sent {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.sent-message {
  justify-content: flex-end;
  text-align: right;
}
.received-message {
  justify-content: flex-start;
}
.message-content {
  background-color: #f0f0f0;
  padding: 8px;
  border-radius: 8px;
}
.sent-message .message-content {
  background-color: #007bff;
  color: #fff;
}
.avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin-right: 10px;
}
</style>